User Connection Statistics
Overview
The User Connection Statistics system provides detailed insights into user's VPN usage, connection metrics, and server preferences.
API Queries
User Connection Dashboard
query MyConnectionDashboard {
myConnectionDashboard {
currentConnection {
id
serverId
serverName
connectionStart
connectionEnd
dataTransferred
cpuUsage
memoryUsage
uploadSpeed
downloadSpeed
networkSpeed
responseTime
latency
tokensCost
tokensEarned
}
recentConnections {
# Same fields as currentConnection
}
totalDataTransferred
averageMetrics {
averageUploadSpeed
averageDownloadSpeed
averageNetworkSpeed
averageResponseTime
averageLatency
}
serverHistory {
serverId
serverName
totalConnections
totalTime
totalDataTransferred
averagePerformance
lastUsed
}
}
}
Connection History
query MyConnectionStats(
$from: DateTime
$to: DateTime
$page: Int = 0
$size: Int = 10
) {
myConnectionStats(from: $from, to: $to, page: $page, size: $size) {
content {
id
serverId
serverName
connectionStart
connectionEnd
dataTransferred
# ... performance metrics
}
totalElements
totalPages
number
size
}
}
Server Usage Statistics
query MyServerUsageStats($serverId: ID!, $from: DateTime, $to: DateTime) {
myServerUsageStats(serverId: $serverId, from: $from, to: $to) {
serverId
serverName
totalConnections
totalTime
totalDataTransferred
averagePerformance {
averageUploadSpeed
averageDownloadSpeed
averageNetworkSpeed
averageResponseTime
averageLatency
}
lastUsed
}
}
UI Components
A. Connection Dashboard
1. Current Connection Card
- Active connection status
- Server name and location
- Connection duration
- Real-time performance metrics
- Token earnings/costs
2. Connection Metrics
- Upload/Download speeds
- Network performance
- Response time and latency
- Data transfer statistics
3. Server History
- Recently used servers
- Performance by server
- Usage patterns
class ConnectionDashboard extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
CurrentConnectionCard(),
ConnectionMetricsPanel(),
ServerHistoryList(),
],
);
}
}
B. Connection History
1. History Filter Panel
- Date range selection
- Server filter
- Performance filter
- Export options
2. Connection List
- Connection timeline
- Server details
- Performance metrics
- Token transactions
3. Analytics Overview
- Usage trends
- Performance patterns
- Cost analysis
class ConnectionHistory extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
HistoryFilterPanel(),
Expanded(
child: ConnectionList(),
),
AnalyticsOverview(),
],
);
}
}
C. Server Analytics
1. Server Performance Card
- Total connections
- Usage duration
- Data transferred
- Average performance
2. Time Series Charts
- Performance trends
- Usage patterns
- Token economics
3. Comparison Tools
- Server comparison
- Performance benchmarks
- Cost efficiency
class ServerAnalytics extends StatelessWidget {
final String serverId;
@override
Widget build(BuildContext context) {
return Column(
children: [
ServerPerformanceCard(serverId: serverId),
TimeSeriesCharts(serverId: serverId),
ServerComparisonTools(),
],
);
}
}
Data Models
ConnectionStats View
interface ConnectionStatsView {
id: string;
serverId: string;
serverName: string;
connectionStart: DateTime;
connectionEnd?: DateTime;
dataTransferred: number;
cpuUsage: number;
memoryUsage: number;
uploadSpeed: number;
downloadSpeed: number;
networkSpeed: number;
responseTime: number;
latency: number;
tokensCost: number;
tokensEarned: number;
}
Connection Averages
interface ConnectionAverages {
averageUploadSpeed: number;
averageDownloadSpeed: number;
averageNetworkSpeed: number;
averageResponseTime: number;
averageLatency: number;
}
Server Usage Stats
interface ServerUsageStats {
serverId: string;
serverName: string;
totalConnections: number;
totalTime: number;
totalDataTransferred: number;
averagePerformance: ConnectionAverages;
lastUsed: DateTime;
}
Implementation Examples
Fetching Dashboard Data
const fetchDashboardData = async () => {
const { data } = await client.query({
query: GET_CONNECTION_DASHBOARD,
variables: {},
fetchPolicy: "network-only",
});
return data.myConnectionDashboard;
};
Connection History Pagination
const fetchConnectionHistory = async (
page: number,
size: number,
dateRange: DateRange
) => {
const { data } = await client.query({
query: GET_CONNECTION_STATS,
variables: {
page,
size,
from: dateRange.start,
to: dateRange.end,
},
});
return data.myConnectionStats;
};